<template>
    <div>
        <h1>练习</h1>

        <p v-for="(item,index) in arrobj" :key="item">{{item}}</p>

        <p v-for="(item,index) in arr" :key="item.id">{{item.name}}---{{item.age}}</p>

        <table class="table table-bordered">
            <tbody>
                <tr align="center">
                    <td>ID</td>
                    <td>姓名</td>
                    <td>年龄</td>
                    <td>婚否</td>
                    <td>操作</td>
                </tr>
                <tr v-for="(item,index) in obj" :key="item.id" align="center">
                    <td>{{item.id}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.age}}</td>
                    <td>{{item.marry}}</td>
                    <td>
                        <input type="button" value="修改" class="btn btn-primary" >
                        <input type="button" value="删除" class="btn btn-primary" >
                        <input type="button" value="上架" class="btn btn-primary" >
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import { ref,reactive } from 'vue';

let arrobj = reactive([1,2,3,4,5])

let arr = reactive([
    {id:1,name:'张三',age:18},
    {id:2,name:'李四',age:20},
    {id:3,name:'王五',age:21},
    {id:4,name:'赵六',age:22},
    {id:5,name:'钱七',age:23},
])

let obj = reactive([
    {id:1,name:'张三',age:18,marry:false},
    {id:2,name:'李四',age:20,marry:false},
    {id:3,name:'王五',age:21,marry:false},
    {id:4,name:'赵六',age:22,marry:false},
    {id:5,name:'钱七',age:23,marry:true},
])


</script>

<style scoped>

</style>